<template>
  <div class="route-nesting">
    <c-alert title="静态路由"></c-alert>
    <nuxt-link to="/route/nesting/1">
      <el-button>多级嵌套</el-button>
    </nuxt-link>
    <nuxt></nuxt>
  </div>
</template>

<script>
export default {
  // 路由的单独动效，通过 'transition: 动画名' 的形式
  transition: 'alone',
  data() {
    return {

    }
  }
}
</script>

<style scoped>
/* 动画可以写在内部，名字不同 */
.alone-enter-active,
.alone-leave-active {
  transition: all 0.5s;
}

.alone-enter,
.alone-leave-active {
  margin-top: 100px;
  opacity: 0;
}
</style>